<template>
  <!-- 饼状图 -->
  <div class="madp-enchart-pie">
    <div id="chartPie" class="chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {}
  },
  props: {
    isUpdate: {
      type: Boolean,
      default: false
    },
    seriesData: {
      type: Array,
      default: []
    }
  },
  watch: {
    isUpdate: function () {
      if (this.isUpdate) {
        this.initChart()
      }
      this.$emit('update:isUpdate', false)
    }
  },
  created() {
    this.initChart()
  },
  mounted() {},
  methods: {
    initChart() {
      let colors = []
      this.seriesData.forEach((ele) => {
        colors.push(ele.color)
      })
      this.$nextTick(() => {
        var chartDom = document.getElementById('chartPie')
        var myChart = echarts.init(chartDom)
        myChart.setOption({
          grid: {
            top: '15%',
            left: '2%',
            bottom: '8%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          color: colors,
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 1
              },
              label: {
                show: false,
                position: 'center'
              },
              data: this.seriesData
            }
          ]
        })
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-enchart-pie {
  .chart {
    width: 100%;
    height: 180px;
    margin: 0 auto;
    padding: 0;
    margin: 0;
  }
}
</style>